<template>
    <div class='son-page'>
        <h2>我是子组件</h2>
        <h3>父组件传入的标题：{{ obj }}</h3>
        <slot>插槽默认文字</slot>
        <div class="content1">
            <p>这是一块内容插槽</p>
            <slot name="one">
                第一个插槽
            </slot>
        </div>
        <div class="content2">
            <p>这是一个子组件的内容</p>
            <div class="color">
                <div class="color_c">
                    <p>R:{{ color.R }}</p>
                    <button @click="color.R >= 255 ? color.R = 255 : addC('R')">red++</button>
                </div>
                <div class="color_c">
                    <p>G:{{ color.G }}</p>
                    <button @click="color.G >= 255 ? color.G = 255 : addC('G')">green++</button>
                </div>
                <div class="color_c">
                    <p>B:{{ color.B }}</p>
                    <button @click="color.B >= 255 ? color.B = 255 : addC('B')">blue++</button>
                </div>
            </div>
        </div>
        <div class="content3">
            <p>这是一块内容作用域插槽用于改变文字颜色以及背景</p>
            <slot name='two' :color="color" :style="{ color: 'rgb(' + color.R + ',' + color.G + ',' + color.B + ')' }">
                没有使用插槽则显示默认</slot>
        </div>
    </div>
</template>

<script>

export default {
    name: 'son-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            title: '',
            color: {
                R: 0,
                G: 0,
                B: 0
            }

        }
    },
    props: ['obj'],
    // props: {
    //     obj: String
    // },
    methods: {
        addC(val) {
            this.color[val] += 5
            console.log('颜色', this.color[val], this.color);
            this.$emit('onColor', this.color)
        }
    }
}
</script>

<style scoped>
/* * {
    margin: 10px;
} */

.son-page {
    padding: 20px;
    background: #777;
    border: 1px solid #fff;
}

.content1 {
    margin: 0;
    background: #ffc0cb;
}

.content2 {
    margin: 0;
    background: #daa520;
}

.content3 {
    margin: 0;
    background: #afabab;
}

.color {
    display: flex;
    justify-content: space-around;
}
</style>